<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>关于我们 - 旅行家</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome 图标 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* 自定义样式 */
    body {
      font-family: 'Microsoft YaHei', sans-serif;
      color: #333;
    }

    .hero-section {
      background: linear-gradient(rgba(0, 0, 0, 0.5), url('https://images.unsplash.com/photo-1464037866556-6812c9d1c72e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
      background-size: cover;
      background-position: center;
      color: white;
      padding: 100px 0;
      text-align: center;
    }

    .mission-card {
      border: none;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s;
      height: 100%;
    }

    .mission-card:hover {
      transform: translateY(-10px);
    }

    .team-member {
      text-align: center;
      margin-bottom: 30px;
    }

    .team-member img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      object-fit: cover;
      border: 5px solid #f8f9fa;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      margin-bottom: 15px;
    }

    .stats-section {
      background-color: #f8f9fa;
      padding: 60px 0;
    }

    .stat-item {
      text-align: center;
      padding: 20px;
    }

    .stat-number {
      font-size: 3rem;
      font-weight: bold;
      color: #42b983;
    }

    .contact-info {
      list-style: none;
      padding-left: 0;
    }

    .contact-info li {
      margin-bottom: 15px;
    }

    .contact-info i {
      width: 30px;
      text-align: center;
      color: #42b983;
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
  <div class="container">
    <a class="navbar-brand" href="index.html">
      <i class="fas fa-compass me-2"></i>旅行家
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="/lv-index/index1.html">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">目的地</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">攻略</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">论坛</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="about.html">关于我们</a>
        </li>
      </ul>
      <div class="d-flex" id="userNav">
        <!-- 这里会动态显示登录状态 -->
        <a href="reg.html" class="btn btn-light">登录/注册</a>
      </div>
    </div>
  </div>
</nav>

<!-- 英雄区域 -->
<section class="hero-section">
  <div class="container">
    <h1 class="display-4 fw-bold mb-4">关于旅行家</h1>
    <p class="lead">连接世界，分享旅程</p>
  </div>
</section>

<!-- 我们的使命 -->
<section class="py-5">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="fw-bold">我们的使命</h2>
      <p class="lead text-muted">让每一次旅行都变得简单而精彩</p>
    </div>

    <div class="row g-4">
      <div class="col-md-4">
        <div class="mission-card p-4">
          <div class="text-center mb-4">
            <i class="fas fa-globe-asia fa-3x text-primary mb-3"></i>
            <h4>探索世界</h4>
          </div>
          <p class="text-muted">我们致力于为用户提供全球最全面的旅行目的地信息，帮助旅行者发现世界的精彩。</p>
        </div>
      </div>

      <div class="col-md-4">
        <div class="mission-card p-4">
          <div class="text-center mb-4">
            <i class="fas fa-users fa-3x text-success mb-3"></i>
            <h4>连接旅行者</h4>
          </div>
          <p class="text-muted">建立一个充满活力的旅行者社区，让志同道合的旅行者能够分享经验、互相帮助。</p>
        </div>
      </div>

      <div class="col-md-4">
        <div class="mission-card p-4">
          <div class="text-center mb-4">
            <i class="fas fa-lightbulb fa-3x text-warning mb-3"></i>
            <h4>提供灵感</h4>
          </div>
          <p class="text-muted">通过真实的旅行故事和专业的旅行建议，激发用户的旅行灵感，让旅行更有意义。</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 我们的故事 -->
<section class="py-5 bg-light">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6 mb-4 mb-lg-0">
        <h2 class="fw-bold mb-4">我们的故事</h2>
        <p>旅行家成立于2015年，由一群热爱旅行的年轻人创立。创始团队在一次长途背包旅行中意识到，虽然互联网上有大量旅行信息，但缺乏一个系统、可靠且用户友好的平台来整合这些信息。</p>
        <p>从最初的旅行博客开始，我们逐渐发展成为一个全面的旅行社区平台。如今，旅行家已经拥有超过100万的注册用户，收录了全球5000多个目的地的详细信息。</p>
        <p>我们的愿景是成为中文世界最值得信赖的旅行信息平台，帮助每个人实现他们的旅行梦想。</p>
      </div>
      <div class="col-lg-6">
        <img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="我们的团队" class="img-fluid rounded shadow">
      </div>
    </div>
  </div>
</section>

<!-- 数据统计 -->
<section class="stats-section">
  <div class="container">
    <div class="row text-center">
      <div class="col-md-3">
        <div class="stat-item">
          <div class="stat-number">1M+</div>
          <p>注册用户</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="stat-item">
          <div class="stat-number">5K+</div>
          <p>目的地</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="stat-item">
          <div class="stat-number">200+</div>
          <p>国家地区</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="stat-item">
          <div class="stat-number">10M+</div>
          <p>旅行照片</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 团队介绍 -->
<section class="py-5">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="fw-bold">我们的团队</h2>
      <p class="lead text-muted">一群热爱旅行的专业人士</p>
    </div>

    <div class="row">
      <div class="col-md-4">
        <div class="team-member">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="张明">
          <h4>张明</h4>
          <p class="text-muted">创始人 & CEO</p>
          <p>资深背包客，曾独自环游世界18个月</p>
        </div>
      </div>

      <div class="col-md-4">
        <div class="team-member">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="李娜">
          <h4>李娜</h4>
          <p class="text-muted">产品总监</p>
          <p>前互联网产品经理，旅行摄影爱好者</p>
        </div>
      </div>

      <div class="col-md-4">
        <div class="team-member">
          <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="王强">
          <h4>王强</h4>
          <p class="text-muted">技术总监</p>
          <p>全栈工程师，户外运动爱好者</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 联系我们 -->
<section class="py-5 bg-light">
  <div class="container text-center">
    <h2 class="fw-bold mb-4">联系我们</h2>
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <ul class="contact-info">
          <li>
            <i class="fas fa-map-marker-alt"></i>
            <span>北京市朝阳区旅行大厦15层</span>
          </li>
          <li>
            <i class="fas fa-phone"></i>
            <span>400-123-4567</span>
          </li>
          <li>
            <i class="fas fa-envelope"></i>
            <span>contact@lvxingjia.com</span>
          </li>
          <li>
            <i class="fas fa-clock"></i>
            <span>周一至周五 9:00-18:00</span>
          </li>
        </ul>

        <div class="mt-4">
          <a href="#" class="btn btn-primary me-2"><i class="fab fa-weixin"></i> 微信公众号</a>
          <a href="#" class="btn btn-info me-2"><i class="fab fa-weibo"></i> 微博</a>
          <a href="#" class="btn btn-dark"><i class="fab fa-github"></i> GitHub</a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 页脚 -->
<footer class="bg-dark text-white py-4">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h5><i class="fas fa-compass me-2"></i>旅行家</h5>
        <p class="text-muted">连接世界，分享旅程</p>
      </div>
      <div class="col-md-6 text-md-end">
        <p class="mb-0">© 2023 旅行家 版权所有</p>
      </div>
    </div>
  </div>
</footer>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- 用户状态处理 -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const userInfo = JSON.parse(localStorage.getItem('userInfo'));
    const userNav = document.getElementById('userNav');

    if (userInfo) {
      // 用户已登录，显示用户头像和下拉菜单
      userNav.innerHTML = `
                <div class="dropdown">
                    <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser" data-bs-toggle="dropdown" aria-expanded="false">
                        <img src="${userInfo.head}" alt="用户头像" width="32" height="32" class="rounded-circle me-2">
                        <span>${userInfo.uname}</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownUser">
                        <li><a class="dropdown-item" href="/lv-other/message.html">信息</a></li>
                        <li><a class="dropdown-item" href="myself.html">个人中心</a></li>
                        <li><a class="dropdown-item" href="#">我的收藏</a></li>
                        <li><a class="dropdown-item" href="#">我的游记</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#" id="logoutBtn">退出登录</a></li>
                    </ul>
                </div>
            `;

      // 添加注销事件
      document.getElementById('logoutBtn').addEventListener('click', function(e) {
        e.preventDefault();
        localStorage.removeItem('userInfo');
        window.location.reload();
      });
    }
  });
</script>
</body>
</html>